<template>
  <div class="mobile-common-query card-item">
    <div class="query-item">
      <span>分类：</span>
      <el-segmented v-model="ledgerStore.queryInfo.book"
                    :options="queryCategoryList"
                    @change="ledgerStore.refreshInfo()"/>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { useLedgerStore } from '@/store/ledger.ts'
import { ICategory } from '@/types'

const ledgerStore = useLedgerStore()

const queryCategoryList = ref([] as ICategory[])

onMounted(async () => {
  await ledgerStore.queryLedgerBook()
  initCategoryList()
  await ledgerStore.queryLedgerList()
})

const initCategoryList = () => {
  queryCategoryList.value = []

  if (ledgerStore.ledgerBookList.length > 0) {
    ledgerStore.queryInfo.book = ledgerStore.ledgerBookList[0]
  }

  ledgerStore.ledgerBookList.forEach((item) => {
    queryCategoryList.value.push({
      label: item,
      value: item
    })
  })
}
</script>
